<template>
  <div class="fundManage">
        <header-bar :type="3" title="资金管理" slideIn="1">
            <div slot="right" class="detail_icon" @click="detail">
                查看明细
            </div>
        </header-bar>
        <div class="fundManage-top-bg">
            <div class="fundManage-bg"></div>
        </div>
        <div class="fundManage-body">
            <!-- <div class="fundManage-bg"></div> -->
            <div class="pannel">
                <div class="pannel-title">账户余额(元)</div>
                <div class="all-amount">{{userInfo.amount |amountFormat}}</div>
                <div class="pannel-detail">
                    <div class="pannel-left">
                        <p>总收款(元)</p>
                        <p>{{userInfo.incomeAmount|amountFormat}}</p>
                    </div>
                    <div class="pannel-right px1bl">
                        <p>已支出(元)</p>
                        <p>{{userInfo.expenditureAmount|amountFormat}}</p>
                    </div>
                </div>
                <div class="btn_bg">
                    <div class="btn btn_green medium" :class="userInfo.extractFlag=='N'||!userInfo.extractFlag || !(userInfo.amount*1)?'disabled':''" @click="cashOut">提现</div>
                </div>
            </div>
            <ul class="fundManage-items">
                <li @click="$router.push({path:'cashOutRecord'})">
                    <span>提现记录</span>
                    <img src="~imgs/header/arrow_right.png">
                </li>
            </ul>
        </div>

  </div>
</template>

<script>
import HeaderBar from 'components/header.vue'
import { mapState, mapActions } from 'vuex'
export default {
    created() {
        this.getUserAccountInfo();
    },
    components:{
        HeaderBar
    },
    data() {
        return {
            userInfo:{}
        }
    },
    methods: {
        ...mapActions(['showMsg', 'toggleLoading']),
        getUserAccountInfo(){
            this.toggleLoading({flag:true});
            this.$ajax.userAccountInfo({}).then(res=>{
                this.toggleLoading({flag:false});
                if(res.code=='0000'){
                    this.userInfo = res.data;
                }
            })
        },
        detail(){
            this.$router.push({path:'fundList'})
        },
        cashOut(){
            if(this.userInfo.extractFlag!='Y' || !(this.userInfo.amount*1)){
                return false;
            }
            this.$router.push({path:'cashOut',query:{amount:this.userInfo.amount,extractLimitNum:this.userInfo.extractLimitNum}});
        }
    },
}
</script>

<style lang="less" scoped>
    .fundManage{
        min-height: 100%;
        background: #F6F6F6;
        /deep/ .detail_icon{
            font-size: .28rem;
            font-weight:400;
        }
        .fundManage-top-bg{
            .fundManage-bg{
                height: 3.2rem;
                width: 100%;
                display: flex;
                background:linear-gradient(180deg,rgba(17,208,124,1) 0%,rgba(15,203,112,0.69) 31%,rgba(10,192,131,0) 100%);
            }
        }
        .fundManage-body{
            margin-top: -3.2rem;
            padding-top: .12rem;

            .pannel{
                margin: 0 .2rem;
                background: #fff;
                border-radius: .16rem;
                .pannel-title{
                    color: #999;
                    font-size: .24rem;
                    text-align: center;
                    padding: .64rem 0 .2rem;
                }
                .all-amount{
                    color: #333;
                    font-size: .8rem;
                    font-weight:bold;
                    font-family: din-bold;
                    text-align: center;
                    line-height:.96rem;
                    margin-bottom: .56rem
                }
                .pannel-detail{
                    display: flex;
                    align-items: center;
                    text-align: center;
                    height: .96rem;
                    .pannel-left,.pannel-right{
                        align-self: center;
                        flex: 1;
                        p{
                            &:nth-child(1){
                                color: #999;
                                font-size: .24rem;
                            }
                            &:nth-child(2){
                                font-size: .36rem;
                                color: #333;
                                font-family: din-bold;
                            }
                        }
                    }   
                    .border-left{
                        border-left: .02rem solid #eee;
                    }
                }
                .btn_bg{
                    padding: 1.2rem 0 .6rem;
                }
            }
            .fundManage-items{
                &>li{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: .2rem .2rem 0;
                    background: #fff;
                    height: .96rem;
                    border-radius: .1rem;
                    padding: 0 .2rem;
                    span{
                        font-size: .28rem;
                        color: #333;
                    }
                    img{
                        width: .16rem;
                        height: .28rem;
                    }
                }
            }
        }
    }
</style>